<template>
  <div id="home">
    <!-- <mx-pane>
      <mx-list class="list-item" v-for="(item, index) in 10" :key="index" />
    </mx-pane>
    <mx-pane>
      <mx-list class="list-item" v-for="(item, index) in 10" :key="index" />
    </mx-pane> -->
    <div class="reveal" ref="reveal1">Welcome to my</div>
    <div class="reveal" ref="reveal3">personal site,</div>
    <div class="reveal" id="reveal" ref="reveal2">I'm ma xin.</div>
  </div>
</template>

<script>
export default {
  name: 'home',
  methods: {
    trans(el) {
      // let duration = 0.8;
      let delay = 0.3;
      let revealText = this.$refs[el]
      let letters = revealText.textContent.split("");
      revealText.textContent = "";
      let middle = letters.filter(e => e !== " ").length / 2;
      letters.forEach((letter, i) => {
        let span = document.createElement("span");
        span.textContent = letter;
        span.style.animationDelay = `${delay + Math.abs(i - middle) * 0.1}s`;
        revealText.append(span);
      });
    }
  },
  mounted() {
    this.trans('reveal1')
    this.trans('reveal2')
    this.trans('reveal3')
  },
}
</script>

<style lang="less" scope>
@import '../../assets/css/index.less';
  #home {
    // display: flex;
    padding: 5%;
    // flex-direction: row;
    // justify-content: space-between;
    box-sizing: border-box;
    .mx-pane {
      width: 45%;
      height: 100%;
      .list-item {
        cursor: pointer;
      }
      .list-item:hover {
        .title {
          color: @yellow;
        }
      }
    }
    #reveal {
      
      &::before {
        position: absolute;
        content: '';
        display: inline-block;
        width: 4px;
        // color: #6ee1f5;
        height: 50%;
        top: 35%;
        left: 38%;
        transform: translateY(-50%);
        animation: blink 1.2s infinite steps(1, start);
      }
      @keyframes blink {
          0%, 100% {
              background-color: #fff;
          }
          50% {
              background-color: transparent;
          } 
      }
    }
    .reveal {
      position: relative;
      display: flex;
      color: #6ee1f5;
      font-size: 5em;
      font-family: Raleway, sans-serif;
      letter-spacing: 3px;
      text-transform: uppercase;
      white-space: pre;
      height: 30%;
      
      span {
        opacity: 0;
        transform: scale(0);
        animation: fadeIn 2.4s forwards;
        &::selection {
          background-color: #111;
          color: white;
        }
      }
      

      @keyframes fadeIn {
        to {
          opacity: 1;
          transform: scale(1);
        }
      }

      @keyframes slideLeft {
        to {
          left: -6%;
          opacity: 1;
          transform: scale(0.9);
        }
      }

      @keyframes slideRight {
        to {
          right: -6%;
          opacity: 1;
          transform: scale(0.9);
        }
      }
    }
  }
</style>